<template>
  <view class="customer-banner">
    <view class="customer-banner-info">
      <view class="customer-banner-info-left">
        <image
          src="/static/images/index/default_avatar.png"
          class="customer-banner-info-left-avatar"
          @tap="toUserinfo"
        />
        <view class="customer-banner-info-left-info">
          <template v-if="userInfo">
            <view class="user">
              <view
                class="user-name"
                @tap="toUserinfo"
              >
                {{ userInfo.mobilePhone }}
              </view>
              <view
                class="user-level"
                @tap="toRights"
              >
                {{ userInfo.customerLevelName }}
              </view>
            </view>
            <view
              class="customer-banner-info-left-info-growth"
              @tap="toRights"
            >
              <view class="customer-banner-info-left-info-growth-progress">
                <view
                  class="customer-banner-info-left-info-growth-progress-value"
                  :style="{ width: '54%' }"
                ></view>
              </view>
              <view class="customer-banner-info-left-info-growth-value">
                <text class="text-primary">54</text>/100
              </view>
            </view>
          </template>
          <template v-else>
            <view
              class="user"
              @tap="toAuth"
            >
              <view class="user-name"> 请先登录 </view>
            </view>
            <view class="text-sm text-secondary"> 登录领取20元新人券包 </view>
          </template>
        </view>
      </view>
      <view class="customer-banner-info-right">
        <template v-if="userInfo">
          <view
            class="customer-banner-info-right-item"
            @tap="toCoinPage"
          >
            <view class="customer-banner-info-right-item-number">70</view>
            <view class="customer-banner-info-right-item-title">雪王币</view>
          </view>
          <view
            class="customer-banner-info-right-item"
            @tap="toCouponPage"
          >
            <view class="customer-banner-info-right-item-number">4</view>
            <view class="customer-banner-info-right-item-title">优惠券</view>
          </view>
        </template>
        <template v-else>
          <button
            class="auth-btn"
            @tap="toAuth"
          >
            授权登录
          </button>
        </template>
      </view>
    </view>
    <view
      class="customer-banner-privilege"
      @tap="showPopup"
      v-if="userInfo"
    >
      <image
        src="/static/images/index/privilege.png"
        class="customer-banner-privilege-image"
        mode="heightFix"
      />
      <view class="customer-banner-privilege-label">
        周二抵现日，雪王币当钱花
      </view>
      <image
        src="/static/images/index/right.png"
        class="customer-banner-privilege-right"
      />
    </view>
    <RightLevelPopup ref="rightLevelPopup" />
  </view>
</template>

<script>
import { mapState } from "vuex"
import RightLevelPopup from "../RightLevelPopup/RightLevelPopup.vue"
export default {
  name: "CustomerBanner",
  components: {
    RightLevelPopup
  },
  computed: {
    ...mapState("user", ["userInfo"])
  },
  methods: {
    toUserinfo() {
      uni.navigateTo({
        url: "/pages/customer-center/userinfo/userinfo"
      })
    },
    toCoinPage() {
      uni.navigateTo({
        url: "/pages/customer-center/coins/coins"
      })
    },
    toCouponPage() {
      uni.navigateTo({
        url: "/pages/marketing/coupons/coupons"
      })
    },
    toRights() {
      uni.navigateTo({
        url: "/pages/customer-center/rights/rights?level=1"
      })
    },
    toAuth() {
      uni.navigateTo({
        url: "/pages/customer-center/auth/auth"
      })
    },
    showPopup() {
      this.$refs.rightLevelPopup.popup()
    }
  }
}
</script>

<style lang="scss" scoped>
.customer-banner {
  position: relative;
  z-index: 100;
  background-color: #fff;
  border-radius: $uni-border-radius-xl;
  overflow: hidden;

  &-info {
    padding: $uni-spacing-row-xl;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-left {
      display: flex;
      align-items: center;
      justify-content: center;
      &-avatar {
        width: 80rpx;
        height: 80rpx;
        margin-right: $uni-spacing-row-sm;
      }

      &-info {
        display: flex;
        flex-direction: column;

        &-growth {
          display: flex;
          align-items: center;
          justify-content: center;

          &-progress {
            flex: 1;
            height: 10rpx;
            background-color: $uni-color-primary-light;
            border-radius: 10rpx;
            margin-right: $uni-spacing-row-sm;
            &-value {
              height: 100%;
              background-color: $uni-color-primary;
              border-radius: 10rpx;
            }
          }

          &-value {
            font-size: $uni-font-size-xs;
            color: $uni-text-color-grey;
          }
        }
      }
    }

    &-right {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: $uni-spacing-row-base;

      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &-number {
          font-size: $uni-font-size-lg;
          color: $uni-text-color;
          font-weight: bold;
          margin-bottom: $uni-spacing-row-sm;
        }

        &-title {
          font-size: $uni-font-size-sm;
          color: $uni-text-color-grey;
        }
      }
    }
  }

  &-privilege {
    margin: 2px;
    border-radius: 0 0 $uni-border-radius-xl $uni-border-radius-xl;
    background-color: #fef6f9;
    padding: $uni-spacing-row-sm $uni-spacing-row-base;
    display: flex;
    align-items: center;
    font-size: $uni-font-size-sm;
    color: #875962;

    &-image {
      height: 50rpx;
      margin-right: $uni-spacing-row-sm;
    }
    &-label {
      flex: 1;
    }
    &-right {
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.user {
  display: flex;
  align-items: center;
  margin-bottom: $uni-spacing-row-sm;

  &-name {
    font-size: $uni-font-size-base;
    color: $uni-text-color;
    font-weight: bold;
    margin-right: $uni-spacing-row-xs;
  }

  &-level {
    padding: $uni-spacing-row-xs $uni-spacing-row-base;
    border-radius: 30px;
    background-color: $uni-color-warning-light;
    color: $uni-color-warning;
    font-size: $uni-font-size-sm;
  }
}

.auth-btn {
  width: 150rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: $uni-border-radius-xl;
  background-color: $uni-color-primary;
  color: #fff;
  font-size: $uni-font-size-base;
}
</style>
